<template>
  <div>
    <el-dialog title="时段配置" width="900px" :visible.sync="visible">
      <table-search :search-form="tableSearch" :on-submit="handleSearch" :on-reset="handleReset" />
      <div class="app-table-action-wrap">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
        >
          新增
        </el-button>
      </div>
      <table-paging
        :table-list="tableData"
        :table-column="tableColumn"
        :table-buttons="tableButtons"
        :table-btn-width="100"
        :table-paging="pagination"
        :table-total="tableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import { TablePaging, TableSearch } from '@/components'

import { fetchAttendanceRecordList, fetchAttendanceRecordDelete } from '@/api/sanitation/attendanceRecord'
import { parseTime } from '@/utils/index'
import { tableColumn, tableSearch } from './config'
export default {
  name: 'AttendanceList',
  components: {
    TablePaging,
    TableSearch
  },
  props: {
    formatColumn: {
      type: Function,
      default: _ => Promise.resolve(_)
    }
  },
  data: function() {
    return {
      parseTime,
      visible: false,
      pagination: { page: 1, pagesize: 10 },
      queryData: {},
      tableColumn,
      tableSearch,
      tableData: [],
      tableTotal: 0,
      tableButtons: [
        { name: '修改', click: this.handleEdit },
        { name: '删除', confirm: '确认删除吗', click: this.handleDelete }
      ]
    }
  },
  created() {
    this.$props.formatColumn(tableColumn).then(res => {
      this.$data.tableColumn = res
    })
  },

  methods: {
    open(attendanceShiftId) {
      this.$data.attendanceShiftId = attendanceShiftId
      this.$data.visible = true
      this.postAttendanceRecordList()
    },

    postAttendanceRecordList() {
      const params = {
        ...this.pagination,
        ...this.queryData,
        attendanceShiftId: this.$data.attendanceShiftId
      }
      fetchAttendanceRecordList(params).then(res => {
        this.$data.tableData = res.records
        this.$data.tableTotal = res.total
      })
    },
    postAttendanceRecordDelete(id) {
      fetchAttendanceRecordDelete(id).then(() => {
        this.$message({
          message: '已删除',
          type: 'success'
        })
        this.postAttendanceRecordList()
      })
    },
    handleSearch(data) {
      this.$data.pagination = { page: 1, pagesize: 10 }
      this.$data.queryData = data
      this.postAttendanceRecordList()
    },
    handleReset(data) {
      this.$data.pagination = { page: 1, pagesize: 10 }
      this.$data.queryData = data
      this.postAttendanceRecordList()
    },
    handleAdd() {
      this.$emit('on-record-edit', this.$data.attendanceShiftId)
    },
    handleEdit(id) {
      this.$emit('on-record-edit', this.$data.attendanceShiftId, id)
    },
    handleDelete(id) {
      this.postAttendanceRecordDelete(id)
    },
    handlePaginChange(pagination) {
      this.$data.pagination = pagination
      this.postAttendanceRecordList()
    }
  }
}
</script>

<style>

</style>
